
import React, { LegacyRef, useEffect, useState } from 'react';
import { observer, useObserver } from 'mobx-react-lite';
import { useStore } from '@/store';
import { Editor } from '@tinymce/tinymce-react';
import './index.scss'
import { useAsyncEffect } from 'ahooks';
function EditorPage(props: { cb: (content: string, edit: Editor) => void }, ref: LegacyRef<Editor> | undefined) {
  const store = useStore()
  const handleEditorChange = async (content: string, editor: any) => {
    props.cb(content, editor);
    // if (store.fileMagage.currentFile.currentFileid == '' && editor.getContent().split('\n').length > 1) {
    //   await store.fileMagage.addFile(store.fileMagage.currentFile.currentTitle)
    // }
  }
  // toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
  // styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
  // table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
  // plugins: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount  help emoticons autosave autoresize',

  useAsyncEffect(async () => {
    store.editorInfo.setEditorHandle(ref);
  }, [])

  return (

    <Editor
      id='SplitPaneSplitPane'
      ref={ref}
      initialValue={store.fileMagage.recordInfo.record.record || ''}
      init={{
        height: '100%',
        language: 'zh_CN',
        startContent: '',
        plugins: 'tpImportword',
        toolbar: ' bold italic underline strikethrough | forecolor backcolor | undo redo | tpImportword ',
        menubar: false,
        min_height: 400,
        importword_handler: function (editor:any, files:any, next:any) {
          var file_name = files[0].name
          if (file_name.substr(file_name.lastIndexOf(".") + 1) == 'docx') {
            editor.notificationManager.open({
              text: '正在转换中...',
              type: 'info',
              closeButton: false,
            });
            next(files);
          } else {
            editor.notificationManager.open({
              text: '目前仅支持docx文件格式，若为doc111，请将扩展名改为docx',
              type: 'warning',
            });
          }
          // next(files);
        },
        importword_filter: function (result:any, insert:any, message:any) {
          // 自定义操作部分
          insert(result) //回插函数
        },
        outputFormat: `text`,
        /*content_css: [ //可设置编辑区内容展示的css，谨慎使用
            '/static/reset.css',
            '/static/ax.css',
            '/static/css.css',
        ],*/
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',

        toolbar_sticky: true,
        autosave_ask_before_unload: false,
      }}
      onEditorChange={handleEditorChange}
    />

  );
}
export default observer(React.forwardRef(EditorPage))

